<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浏览器原生弹窗</title>
    <style>
        dialog{
            border-radius: 10px;
            border-color: #ccc;
        }
        dialog::backdrop{
            background-color: #ff4400;
            backdrop-filter: blur(1px);
        }
    </style>
</head>
<body>
    <button onclick="dog.show()">弹窗</button>
    <dialog open id="dog">
        <div class="win">
            <p>this is a window</p>
            <input type="text" name="" id="">
            <p><button onclick="dog.close()">关闭</button></p>
        </div>
    </dialog>

    <button onclick="dog2.showModal()">弹窗2</button>
    <dialog id="dog2">
        <div class="win">
            <p>this is a window</p>
            <input type="text" name="" id="">
            <p><button onclick="dog2.close()">关闭</button></p>
        </div>
    </dialog>
   
</body>
</html>